{% extends "layout_public.phtml" %}

{% import "macro_functions.phtml" as mf %}

{% block meta_title %}{% trans 'Sign up' %}{% endblock %}
{% block body %}

<section class="container login" role="main">

    {% if settings.login_page_show_logo %}
    {% set company = guest.system_company %}
    <h1 style="text-align: center">
        {% if settings.login_page_show_logo %}
        <a href="{{ settings.login_page_logo_url | default('/')}}" target="_blank"><img src="{{ guest.system_company.logo_url }}" alt="{{ guest.system_company.name }}"/></a>
        {% endif %}
    </h1>
    {% endif %}
    <div class="data-block">
        <div class="data-container">

            <form method="post" action="" id="client-signup">
                <div class="alert alert-info" style="display: none" id="account-created-info-block">
                    <button class="close" data-dismiss="alert">×</button>
                    <strong>{% trans 'Account has been created' %}.</strong> {% trans 'Please check your mailbox and confirm email address' %}.
                </div>
                <fieldset>
                    {% set r = guest.client_required %}
                    <div class="control-group">
                        <label class="control-label" for="reg-email">{% trans 'Email Address' %}</label>
                        <div class="controls">
                            <input type="text" name="email" value="{{ request.email }}" required="required" id="reg-email">
                            <p class="help-block"></p>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="first-name">{% trans 'First Name' %}</label>
                        <div class="controls">
                            <input type="text" name="first_name" id="first-name" value="{{ request.first_name }}" required="required">
                            <p class="help-block"></p>
                        </div>
                    </div>


                    {% if 'last_name' in r %}
                    <div class="control-group">
                        <label class="control-label" for="last_name">{% trans 'Last Name' %}</label>
                        <div class="controls">
                            <input type="text" name="last_name" id="last_name" value="{{ request.last_name }}" required="required">
                            <p class="help-block"></p>
                        </div>
                    </div>
                    {% endif %}


                    {% if 'company' in r %}
                    <div class="control-group">
                        <label class="control-label" for="company">{% trans 'Company' %}</label>
                        <div class="controls">
                            <input type="text" name="company" id="company" value="{{ request.company }}" required="required">
                            <p class="help-block"></p>
                        </div>
                    </div>
                    {% endif %}

                    {% if 'birthday' in r %}
                    <div class="control-group">
                        <label class="control-label" for="birthday">{% trans 'Birthday' %}</label>
                        <div class="controls">
                            <input type="text" name="birthday" id="birthday" value="">
                            <p class="help-block"></p>
                        </div>
                    </div>
                    {% endif %}

                    {% if 'gender' in r %}
                    <div class="control-group">
                        <label class="control-label" for="gender">{% trans 'You are' %}</label>
                        <div class="controls">
                            <select name="gender" id="gender">
                                <option value="male">Male</option>
                                <option value="female">Female</option>
                            </select>
                            <p class="help-block"></p>
                        </div>
                    </div>
                    {% endif %}

                    {% if 'address_1' in r %}
                    <div class="control-group">
                        <label class="control-label" for="address_1">{% trans 'Address' %}</label>
                        <div class="controls">
                            <input type="text" name="address_1" id="address_1" value="{{ request.address_1 }}">
                            <p class="help-block"></p>
                        </div>
                    </div>
                    {% endif %}

                    {% if 'address_2' in r %}
                    <div class="control-group">
                        <label class="control-label" for="address_2">{% trans 'Address 2' %}</label>
                        <div class="controls">
                            <input type="text" name="address_2" id="address_2" value="{{ request.address_2 }}">
                            <p class="help-block"></p>
                        </div>
                    </div>
                    {% endif %}

                    {% if 'city' in r %}
                    <div class="control-group">
                        <label class="control-label" for="city">{% trans 'City' %}</label>
                        <div class="controls">
                            <input type="text" name="city" id="city" value="{{ request.city }}">
                            <p class="help-block"></p>
                        </div>
                    </div>
                    {% endif %}

                    {% if 'country' in r %}
                    <div class="control-group">
                        <label class="control-label" for="country">{% trans 'Country' %}</label>
                        <div class="controls">
                            <select name="country" required="required">
                                <option value="">{% trans '-- Select country --' %}</option>
                                {% for val,label in guest.system_countries %}
                                <option value="{{ val }}" label="{{ label|e }}">{{ label|e }}</option>
                                {% endfor %}
                            </select>
                            <p class="help-block"></p>
                        </div>
                    </div>
                    {% endif %}

                    {% if 'state' in r %}
                    <div class="control-group">
                        <label class="control-label" for="state">{% trans 'State' %}</label>
                        <div class="controls">
                            {# mf.selectbox('state', guest.system_states, request.state, 0, 'Select state') #}
                            <input type="text" name="state" id="state" value="{{ request.state }}" />
                            <p class="help-block"></p>
                        </div>
                    </div>
                    {% endif %}

                    {% if 'postcode' in r %}
                    <div class="control-group">
                        <label class="control-label" for="postcode">{% trans 'Zip/Postal Code' %}</label>
                        <div class="controls">
                            <input type="text" name="postcode" id="postcode" value="{{ request.postcode }}">
                            <p class="help-block"></p>
                        </div>
                    </div>
                    {% endif %}

                    {% if 'phone' in r %}
                    <div class="control-group">
                        <label class="control-label" for="phone">{% trans 'Phone Number' %}</label>
                            <div class="input-prepend">
                                <input type="text" name="phone_cc" value="" style="width:20%">
                                <input id="phone" type="text" name="phone" value="{{ request.phone }}" style="width:70%">
                            </div>
                            <p class="help-block"></p>
                    </div>
                    {% endif %}

                    {% set custom_fields = guest.client_custom_fields %}
                    {% for field_name, field in custom_fields %}
                        {% if field.active %}
                            <div class="control-group">
                                <label class="control-label" for="{{ field_name }}">{% if field.title is not empty %}{{ field.title }}{% else %} {{ field_name | capitalize }} {% endif %}</label>
                                <div class="controls">
                                    <input type="text" name="{{ field_name }}" id="{{ field_name }}" value="{{ attribute(request, field_name) }}" {% if field.required %}required="required"{% endif %}>
                                    <p class="help-block"></p>
                                </div>
                            </div>
                        {% endif %}
                    {% endfor %}


                    <div class="control-group">
                        <label class="control-label" for="reg-password">{% trans 'Password' %}</label>
                        <div class="controls">
                            <input type="password" name="password" value="" required="required" id="reg-password">
                            <p class="help-block"></p>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="password-confirm">{% trans 'Password confirm' %}</label>
                        <div class="controls">
                            <input type="password" name="password_confirm" name="password-confirm" value="" required="required">
                            <p class="help-block"></p>
                        </div>
                    </div>

                    {{ mf.recaptcha }}

                    <div class="form-actions">
                        <button class="btn btn-block btn-large btn-inverse btn-alt" type="submit">{% trans 'Sign up' %}</button>
                    </div>

                </fieldset>
                <input type="hidden" name="auto_login" value="1"/>
            </form>

        </div>
    </div>

    <ul class="login-footer">
        <li><a href="{{ 'login'|link }}"><small>{% trans 'Login' %}</small></a></li>
    </ul>

</section>

{% endblock %}

{% block js %}
<script type="text/javascript">
    $(function () {
        $('#client-signup').bind('submit', function (event) {
            $.ajax({
                type: "POST",
                url: bb.restUrl('guest/client/create'),
                data: $(this).serialize(),
                dataType: 'json',
                success: function (data) {
                    if (data.error) {
                        if (data.error.code == 7777) {
                            $('#account-created-info-block').show();
                        } else {
                            $('.wait').hide();
                            bb.msg(data.error.message, 'error');
                        }
                    } else {
                        bb.redirect('/');
                    }
                }
            });
            return false;
        });
    });
</script>
{% endblock %}